<template>
  <div id="a_box">
      <div v-if="amsg">
          {{amsg.title}}
      </div>
      <a href="#SOHUCS"><div id="comment"></div></a>
      <div id="lead">
          <div>导语</div>
      </div>
      <div id="l_text" v-if="amsg">
          <div :style="{'background-image': `url(${amsg.img})`}"></div>
          <div class="vmcontent" v-html="amsg.content"></div>
          <!-- <div>{{article.lead.text[1]}}</div> -->
      </div>
      <!-- <div id="c_text">
          <div>{{article.content.title}}</div>
          <div class="section" v-for="sec in article.content.section" :key="sec.title">
              <div>{{sec.title}}</div>
              <div>
                  <p v-for="text in sec.text">{{text}}</p>
              </div>
          </div>
      </div>
      <div id="may">
          <div>你可能还感兴趣：</div>
          <div>九个个人所得税的合理避税技巧合理避税技巧理...</div>
      </div> -->
      <!-- 畅言代码 -->
      <!--WAP版-->
      <div id="SOHUCS"></div>
      <div id="hot">
          <div>热评话题</div>
          <div class="hitem" v-for="(h, i) in hotT">
              <div>{{i + 1}}</div>
              <router-link :to="h.href" tag="div">{{h.title}}</router-link>
          </div>
      </div>
      <div id="more">
          <div>更多专题</div>
          <aitem v-if="hotZ[0]" :msg="hotZ[0]" />
          <router-link class="alist" v-for="(msg, i) in hotZ" v-if="i > 0" :style="{'margin-top': (i == 0 ? '0.5rem' : '0.3rem')}" :to="msg.href" :key="msg.title" tag="div">{{msg.title}}</router-link>
      </div>
      <div id="cor">
          <div>相关资讯</div>
          <Sitem v-for="msg in hotZ" :msg="msg" :key="msg.img"/>
          <more url="/news/"/>
      </div>
      <div class="ad"></div>
  </div>
</template>
<script>
import aitem from "./public/Aitem";
import Sitem from "./public/Sitem";
import more from "./public/More";
import { Get, Post, Port } from "../../server/ajax";
export default {
  data() {
    return {
      amsg: null,
      hotT: [],
      hotZ: [],
      t: null,
      id: null,
      scriptFile: null
    };
  },
  activated() {
    this.$parent.tState = 1;
    this.$parent.fState = 1;
    clearInterval(this.t);
    this.t = setInterval(
      function() {
        if (
          !this.$route.params.id ||
          isNaN(parseInt(this.$route.params.id.split("p")[1]))
        ) {
          clearInterval(this.t);
          return;
        }
        if (
          this.$route.params.id.split("p").length &&
          this.id != parseInt(this.$route.params.id.split("p")[1])
        ) {
          this.getArticle();
        }
      }.bind(this),
      100
    );
    this.getArticle();
    Post(
      `${Port}/mobile/cms/subjects`,
      {
        page_size: 7
      },
      function(data) {
        this.hotT = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/subjects`,
      {
        page_size: 3
      },
      function(data) {
        this.hotZ = data;
      }.bind(this)
    );
  },
  methods: {
    getArticle() {
      this.id = parseInt(this.$route.params.id.split("p")[1]);
      Post(
        `${Port}/mobile/cms/main_subject`,
        {
          id: this.id
        },
        function(data) {
          this.amsg = data[0];
          setTimeout(
            function() {
              this.$parent.updata();
            }.bind(this),
            200
          );
          if (this.scriptFile) {
            document.body.removeChild(this.scriptFile);
          }
          this.scriptFile = document.createElement("script");
          this.scriptFile.setAttribute("id", "changyan_mobile_js");
          this.scriptFile.setAttribute("charset", "utf-8");
          this.scriptFile.setAttribute("type", "text/javascript");
          this.scriptFile.setAttribute(
            "src",
            `https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=${this.amsg.changyan_id}&conf=${this.amsg.changyan_conf}`
          );
          document.body.appendChild(this.scriptFile);
          this.scriptFile.onload = function() {
            setTimeout(
              function() {
                this.$parent.updata();
              }.bind(this),
              1000
            );
          }.bind(this);
        }.bind(this)
      );
    }
  },
  components: {
    aitem,
    Sitem,
    more
  }
};
</script>
<style scoped>
#a_box {
  padding: 0.5rem 0 0;
}
#a_box > div:nth-child(1) {
  font-size: 0.45rem;
  line-height: 0.68rem;
  color: #333;
  font-weight: bold;
  padding: 0 0.3rem;
}
#comment {
  width: 1.38rem;
  height: 0.66rem;
  background-size: cover;
  background-image: url("~@/assets/article/comment.png");
  margin: 0.5rem 0 0 0.3rem;
}
#lead {
  border-bottom: 0.01rem solid #ed5172;
  margin: 0.6rem 0 0 0.3rem;
}
#lead > div {
  height: 0.45rem;
  width: 1rem;
  line-height: 0.5rem;
  color: #fff;
  background-color: #ed5172;
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  font-size: 0.24rem;
  text-align: center;
}
#l_text {
  font-size: 0.3rem;
  color: #333;
  line-height: 0.56rem;
  padding: 0.32rem 0 0;
}
#l_text > div {
  text-indent: 0.5rem;
}
#l_text > div:nth-child(1) {
  height: 4.6rem;
  width: 6.9rem;
  margin: 0 auto;
  background-size: cover;
  margin-top: 1.2rem;
}
/* #l_text > div:nth-child(3) {
  margin-top: 0.3rem;
} */
#c_text {
  margin-top: 0.5rem;
  border-bottom: 0.01rem dotted #dadada;
  padding: 0 0.3rem 0.5rem;
}
#c_text > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  border-left: 0.06rem solid #ed5172;
  line-height: 0.36rem;
  text-indent: 0.15rem;
  font-weight: bold;
}
.section {
  margin-top: 0.5rem;
}
.section > div:nth-child(1) {
  font-size: 0.3rem;
  color: #333;
  font-weight: bold;
}
.section p {
  font-size: 0.3rem;
  line-height: 0.56rem;
  text-indent: 0.5rem;
  margin-top: 0.3rem;
}
#may {
  padding: 0.6rem 0.3rem 0;
}
#may > div:nth-child(1) {
  font-size: 0.28rem;
  color: #999;
}
#may > div:nth-child(2) {
  font-size: 0.32rem;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 0.2rem;
}
#hot {
  padding: 0.8rem 0.3rem 0;
}
#hot > div:nth-child(1) {
  font-size: 0.34rem;
  color: #333;
  font-weight: bold;
}
#hot > div:nth-child(2) > div:nth-child(1) {
  background-color: #ba0b0b;
}
#hot > div:nth-child(3) > div:nth-child(1) {
  background-color: #e24242;
}
#hot > div:nth-child(4) > div:nth-child(1) {
  background-color: #e46a6a;
}
.hitem {
  font-size: 0.34rem;
  color: #333;
  overflow: hidden;
  margin-top: 0.42rem;
}
.hitem > div {
  float: left;
  line-height: 0.34rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.hitem > div:nth-child(1) {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 0.03rem;
  background-color: #9e9e9e;
  color: #fff;
  font-size: 0.22rem;
  line-height: 0.34rem;
  text-align: center;
  margin-right: 0.2rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.hitem > div:nth-child(2) {
  width: 6.4rem;
}
#more {
  margin-top: 1.6rem;
  padding-bottom: 0.8rem;
  border-bottom: 0.2rem solid #f4f5f7;
}
#more > div:nth-child(1) {
  font-size: 0.34rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 0.7rem;
  margin-left: 0.3rem;
}
.alist {
  font-size: 0.32rem;
  color: #333;
  /* text-align: center; */
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 0.3rem;
}
#cor {
  padding: 0.8rem 0.3rem 0;
}
#cor > div:nth-child(1) {
  font-size: 0.34rem;
  color: #333;
  font-weight: bold;
}
.ad {
  width: 6.92rem;
  height: 3rem;
  background-image: url("~@/assets/article/ad.png");
  background-size: cover;
  margin: 0 auto 1.1rem;
}
</style>
